<template>
    <keep-alive>
      <index key="1" v-if="stepIndex === 0"/>
      <step1 key="2" v-else-if="stepIndex === 1"/>
      <step2 key="3" v-else-if="stepIndex === 2"/>
      <step3 key="4" v-else-if="stepIndex === 3"/>
      <result key="5" v-else/>
    </keep-alive>
</template>

<script setup>
  import index from '@/views/index.vue'
  import step1 from '@/views/step1.vue'
  import step2 from '@/views/step2.vue'
  import step3 from '@/views/step3.vue'
  import result from '@/views/result.vue'

  import { stepIndex } from '@/stores'
</script>

<style lang="scss">
  html {
    font-size: calc(100vw / 375 * 100);
  }

  .bgm-wrap {
    height: 100vh;
    background: url('https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/celebrate/bg/bgm-wrap.png') no-repeat center / 100% 100%;
    overflow: hidden;
  }

  .index-swiper {
    height: 100vh;
  }

  .index-swiper .van-swipe-item {
    overflow: auto;
  }

  .next-btn {
    width: 1.22rem;
    height: .36rem;
    background: url('@/assets/images/btn-bgm.png') no-repeat center / 100% 100%;
  }

  .next-btn.fixed {
    left: 50%;
    transform: translateX(-50%);
  }

  .next-btn.fixed, .next-wrap {
    position: absolute;
    bottom: .3rem;
    z-index: 10;
  }

  .choose-img {
      width: 2.95rem;
      height: 1.94rem;
      display: block;
      border-radius: 0.2rem;
  }
</style>
